<template>
  <div class="panel">
    <div class="panel-header">
      <slot name="header">
        {{ pageName }}
      </slot>
    </div>
    <div>
      <div
        class="editable-list-panel__td"
        v-for="(item, index) in columns"
        :key="index"
      >
        <label>{{ item.label || '/' }}：</label>
        <div v-if="item.isEditable && isEdit">
          <div class="editable-list-panel__td_input">
            <el-input
              @input="
                () => {
                  handleValidate(item)
                }
              "
              @change="
                () => {
                  handleValidate(item)
                }
              "
              style="width: 300px"
              v-model="form[`${item.value}`]"
              v-bind="item"
            />
            <div
              class="editable-list-panel__td_error"
              v-if="validateError[item.value]"
            >
              {{ generateErrorMsg(item) }}
            </div>
          </div>
        </div>
        <td v-else>
          {{
            typeof item.formatter === 'function'
              ? item.formatter(data)
              : data[item.value] || '/'
          }}
        </td>
      </div>
      <!-- <table class="editable-list-panel__table">
        <tbody>
          <tr v-for="(item, index) in columns" :key="index">
            <td class="editable-list-panel__td_label">{{ item.label }}:</td>
            <td v-if="item.isEditable && isEdit">
              <div class="editable-list-panel__td_input">
                <el-input
                  @input="
                    () => {
                      handleValidate(item)
                    }
                  "
                  @change="
                    () => {
                      handleValidate(item)
                    }
                  "
                  style="width: 300px"
                  v-model="form[`${item.value}`]"
                  v-bind="item"
                />
                <div
                  class="editable-list-panel__td_error"
                  v-if="validateError[item.value]"
                >
                  {{ generateErrorMsg(item) }}
                </div>
              </div>
            </td>
            <td v-else>
              {{
                typeof item.formatter === 'function'
                  ? item.formatter(data)
                  : data[item.value] || '/'
              }}
            </td>
          </tr>
        </tbody>
      </table> -->
      <div class="editable-list-panel__buttons">
        <el-button
          v-for="button in buttons.filter(
            (item) =>
              resourceSet.includes(item.resourceId) &&
              (typeof item.hidden === 'function'
                ? !item.hidden(data)
                : !item.hidden)
          )"
          :key="button.label"
          @click="
            () => {
              handleClick(button)
            }
          "
          :type="button.type"
        >
          {{ button.label }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  name: 'EditableList',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    isEdit: {
      type: Boolean,
      default: () => false,
    },
    buttons: {
      type: Array,
      default: () => [],
    },
    rules: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
      validateError: {},
    }
  },
  watch: {
    isEdit: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.validateError = {}
        }
        if (val === true) {
          this.form = cloneDeep(this.data)
        }
      },
    },
  },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    pageName() {
      return this.title || this.$route.meta.title
    },
  },
  methods: {
    handleValidate(item) {
      if (!item.isEditable) return

      if (item.required && this.form[item.value] == '') {
        this.validateError[item.value] = true
        return
      } else if (this.rules[item.value]) {
        if (this.rules[item.value].required && this.form[item.value] == '')
          this.validateError[item.value] = true
        else if (
          this.rules[item.value].validator &&
          !this.rules[item.value].validator()
        )
          this.validateError[item.value] = true
        return
      }

      delete this.validateError[item.value]
    },
    generateErrorMsg(item) {
      if (this.rules[item.value] && this.rules[item.value].message)
        return this.rules[item.value].message

      return '此项为必填项'
    },
    handleClick(button) {
      if (button.handleEdit) {
        let validateError = {}
        let result = {}
        this.columns
          .filter((column) => column.isEditable)
          .forEach((item) => {
            result[item.value] = this.form[item.value]

            if (item.required && this.form[item.value] == '') {
              validateError[item.value] = true
            } else if (this.rules[item.value]) {
              if (
                this.rules[item.value].required &&
                this.form[item.value] == ''
              )
                validateError[item.value] = true
              else if (
                this.rules[item.value].validator &&
                !this.rules[item.value].validator()
              )
                validateError[item.value] = true
            }
          })

        this.validateError = validateError

        if (Object.keys(validateError).length > 0) return

        button.click(result)
      } else {
        button.click()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.editable-list-panel__td {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 15px;

  height: 50px;
  border-bottom: 1px solid #eff2f7;

  .editable-list-panel__td_label {
    text-align: right;
    width: 20%;
  }

  .editable-list-panel__td_input {
    display: flex;
    align-items: center;

    .editable-list-panel__td_error {
      padding-left: 20px;
      color: red;
    }
  }
}

.editable-list-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
</style>
